<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太阳能发电系统实时监控 - 统计数据</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/statistics.css">
  <!-- 引入字体图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
</head>
<body>
  <div id="app">
    <!-- 主容器 -->
    <div class="solar-app">
      <!-- 顶部导航栏 -->
      <header class="app-header">
        <div class="app-title">
          <!-- <img src="assets/透明底Logo.png" alt="太阳能发电监控系统" class="app-logo"> -->
          <h1>独立式家庭供电自发自用系统</h1>
        </div>
        <div class="last-update">最后更新: {{ lastUpdateTime }}</div>
      </header>

      <!-- 导航菜单 -->
      <div class="nav-menu">
        <div class="nav-item" data-page="index">
          <i class="fas fa-tachometer-alt"></i>
          <div>仪表盘</div>
        </div>
        <div class="nav-item" data-page="weather">
          <i class="fas fa-cloud-sun"></i>
          <div>天气</div>
        </div>
        <div class="nav-item" data-page="statistics">
          <i class="fas fa-chart-bar"></i>
          <div>统计</div>
        </div>
        <div class="nav-item" data-page="settings">
          <i class="fas fa-cog"></i>
          <div>设置</div>
        </div>
      </div>

      <!-- 时间范围选择器 -->
      <div class="time-selector">
        <div class="time-option" :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">天</div>
        <div class="time-option" :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">周</div>
        <div class="time-option" :class="{ active: timeRange === 'month' }" @click="changeTimeRange('month')">月</div>
        <div class="time-option" :class="{ active: timeRange === 'year' }" @click="changeTimeRange('year')">年</div>
      </div>

      <!-- 今日发电 -->
      <section class="card today-generation" v-if="timeRange === 'day'">
        <h2>今日发电</h2>
        <div class="progress-container">
          <div class="progress-ring">
            <svg width="120" height="120" viewBox="0 0 120 120">
              <circle class="progress-ring-circle-bg" cx="60" cy="60" r="54" />
              <circle class="progress-ring-circle" cx="60" cy="60" r="54" 
                :stroke-dasharray="progressCircumference" 
                :stroke-dashoffset="getDashOffset(powerData.todayGeneration, powerData.dailyTarget)" />
            </svg>
            <div class="progress-text">
              <span class="generation-value">{{ powerData.todayGeneration }}</span>
              <span class="generation-target">/ {{ powerData.dailyTarget }}度</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 发电曲线 -->
      <section class="card hourly-generation">
        <h2>{{ timeRange === 'day' ? '小时' : timeRange === 'week' ? '每日' : timeRange === 'month' ? '每日' : '每月' }}发电曲线</h2>
        <div class="hourly-chart">
          <canvas id="hourly-chart"></canvas>
        </div>
      </section>

      <!-- 电力分配面板 -->
      <section class="card power-distribution">
        <h2>电力分配</h2>
        <div class="distribution-container">
          <div class="pie-chart-container">
            <canvas id="distribution-chart"></canvas>
          </div>
          <div class="distribution-details">
            <div class="distribution-item home">
              <div class="item-color"></div>
              <div class="item-label">家庭用电</div>
              <div class="item-value">{{ distributionData.home }}度 ({{ distributionData.homePercent }}%)</div>
            </div>
            <div class="distribution-item load">
              <div class="item-color"></div>
              <div class="item-label">负载用电</div>
              <div class="item-value">{{ distributionData.load }}度 ({{ distributionData.loadPercent }}%)</div>
            </div>
          </div>
        </div>
        <div class="saving-info">
          <i class="fas fa-piggy-bank"></i>
          <span>今日预估节省电费: ¥{{ distributionData.savingAmount }}</span>
        </div>
      </section>

      <!-- 图表说明 -->
      <div class="chart-legend">
        <div class="legend-item">
          <div class="legend-color" style="background-color: #0077cc;"></div>
          <div class="legend-label">发电量</div>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background-color: #0077cc;"></div>
          <div class="legend-label">家庭用电</div>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background-color: #00aa55;"></div>
          <div class="legend-label">负载用电</div>
        </div>
      </div>
    </div>

    <!-- 系统报警弹窗 -->
    <div class="alert-overlay" v-if="showAlert">
      <div class="alert-content">
        <div class="alert-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3>系统报警</h3>
        <p>{{ alertMessage }}</p>
        <button class="alert-btn" @click="acknowledgeAlert" title="确认报警">我知道了</button>
      </div>
    </div>
  </div>

  <!-- 引入必要的JS库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/common.js"></script>
  <script src="js/statistics.js"></script>
</body>
</html>